<template>
  <div class="app-container">
    <el-form ref="form" style="margin-top: 6px;" size="small" label-width="90px">
      <el-form-item label="基础运费">
        <el-table :data="basicsList" size="small" style="width: 400px;" :center="true">
          <el-table-column label="开始距离(KM)" align="center">
            <template slot-scope="scope">
              0
            </template>
          </el-table-column>
          <el-table-column label="结束距离(KM)" align="center">
            <template slot-scope="scope">
              0
            </template>
          </el-table-column>
          <el-table-column label="基础费" align="center">
            <template slot-scope="scope">
              <el-input placeholder="请输入配送费用" v-model="basicsList[scope.$index].price"/>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item label="距离运费">
        <el-table :data="distanceList" size="small" style="width: 400px;" :center="true">
          <el-table-column label="开始距离(KM)" align="center">
            <template slot-scope="scope">
              <el-input placeholder="请输入开始距离" v-model="distanceList[scope.$index].min"/>
            </template>
          </el-table-column>
          <el-table-column label="结束距离(KM)" align="center">
            <template slot-scope="scope">
              <el-input placeholder="请输入结束距离" v-model="distanceList[scope.$index].max"/>
            </template>
          </el-table-column>
          <el-table-column label="增值费" align="center">
            <template slot-scope="scope">
              <el-input placeholder="请输入配送费用" v-model="distanceList[scope.$index].price"/>
            </template>
          </el-table-column>
          <el-table-column align="center">
            <template slot-scope="scope">
              <el-button class="del" size="mini" type="info" icon="el-icon-close"
                         @click="delDistanceList(scope.$index)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button class="add" size="mini" type="primary" icon="el-icon-plus" @click="addDistanceList"></el-button>
        <p class="desc">距离运费是在每条记录范围内的距离进行每公里增值费用</p>
      </el-form-item>

     <!-- <el-form-item label="重量运费" >
        <el-table :data="weightList" size="small" style="width: 400px;" :center="true">
          <el-table-column  label="开始重量(斤)" align="center">
            <template slot-scope="scope">
              <el-input placeholder="请输入开始重量" v-model="weightList[scope.$index].min" />
            </template>
          </el-table-column>
          <el-table-column  label="结束重量(斤)" align="center">
            <template slot-scope="scope">
              <el-input placeholder="请输入结束重量" v-model="weightList[scope.$index].max" />
            </template>
          </el-table-column>
          <el-table-column  label="增值费" align="center">
            <template slot-scope="scope">
              <el-input placeholder="请输入重量费用" v-model="weightList[scope.$index].price" />
            </template>
          </el-table-column>
          <el-table-column align="center">
            <template slot-scope="scope" >
              <el-button class="del" size="mini"  type="info" icon="el-icon-close" @click="delWeightList(scope.$index)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button class="add" size="mini"  type="primary" icon="el-icon-plus" @click="addWeightList"></el-button>
        <p class="desc">重量运费是在每条记录范围内的重量进行每公里增值费用</p>
      </el-form-item>-->

      <el-form-item label="时间运费">
        <el-table :data="timeList" size="small" style="width: 600px;" :center="true">
          <el-table-column label="开始时间" align="center">
            <template slot-scope="scope">
              <el-time-select
                placeholder="开始时间"
                v-model="timeList[scope.$index].min"
                style="width: 130px"
                :picker-options="{
                  start: '00:00',
                  step: '00:15',
                  end: '23:59'
                 }">
              </el-time-select>
            </template>
          </el-table-column>
          <el-table-column label="结束时间" align="center">
            <template slot-scope="scope">
              <el-time-select
                placeholder="结束时间"
                v-model="timeList[scope.$index].max"
                style="width: 130px"
                :picker-options="{
                  start: '00:00',
                  step: '00:15',
                  end: '23:59'
                 }">
              </el-time-select>
            </template>
          </el-table-column>
          <el-table-column label="加班费" align="center">
            <template slot-scope="scope">
              <el-input placeholder="请输入重量费用" v-model="timeList[scope.$index].price"/>
            </template>
          </el-table-column>
          <el-table-column align="center">
            <template slot-scope="scope">
              <el-button class="del" size="mini" type="info" icon="el-icon-close"
                         @click="delTimeList(scope.$index)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button class="add" size="mini" type="primary" icon="el-icon-plus" @click="addTimeList"></el-button>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" size="small" :loading="submitLoading">保 存</el-button>
    </div>

  </div>
</template>

<script>
  import {
    getDistributionConfig,
    updateDistributionConfig
  } from '@/api/system/distributionConfig'

  export default {
    data() {
      return {
        regionId: undefined,
        basicsList: [
        ],
        distanceList: [
        ],
        timeList: [
        ],
        submitLoading: false,
      }
    },
    created() {
      const regionId = this.$route.params && this.$route.params.id;
      if (regionId == undefined) {
        this.regionId = 0;
      }else{
        this.regionId=regionId;
      }
      this.getConfigInfo(this.regionId)
    },
    methods: {
      addDistanceList() {
        this.distanceList.push({
          min: 0,
          max: 0,
          price: 0,
          type: '10',
          priceType: '20'
        })
      },
      delDistanceList(index) {
        this.distanceList.splice(index, 1)
      },
      delTimeList(index) {
        this.timeList.splice(index, 1)
      },
      addTimeList(index) {
        this.timeList.push({
          min: 0,
          max: 0,
          price: 0,
          type: '30',
          priceType: '10'
        })
      },
      submitForm: function () {
        let dataList = []
        //判断基础是否有设置值
        if (this.basicsList[0].price < 0) {
          this.msgError('基础运费设置不合法')
          return;
        }
        //判断距离设置值合不合法
        var disticeFlag = true
        if (this.distanceList.length > 0) {
          for (var i = 0; i < this.distanceList.length; i++) {
            if (this.distanceList[i].price <= 0) {
              disticeFlag = false
            }
            if (i > 0) {
              if (parseFloat(this.distanceList[i].min) < parseFloat(this.distanceList[i - 1].max)) {
                disticeFlag = false
              }
            }
          }
          if (disticeFlag == false) {
            this.msgError('距离运费设置不合法')
            return;
          }
        }
        var flagTime = true
        if (this.timeList.length > 0) {
          for (var i = 0; i < this.timeList.length; i++) {
            if (this.timeList[i].min === 0 || this.timeList[i].max === 0){
              flagTime = false
            }
            if (i > 0) {
              if (this.timeList[i].min !== this.timeList[i - 1].max) {
                flagTime = false
              }
            }
            if (this.timeList[i].price < 0) {
              flagTime = false
            }
          }
          if (flagTime == false) {
            this.msgError('时间运费设置不合法')
            return;
          }
        }
        dataList = dataList.concat(this.basicsList)
        dataList = dataList.concat(this.distanceList)
        dataList = dataList.concat(this.timeList)
        this.submitLoading = true
        updateDistributionConfig({dataList:dataList,regionId:this.regionId}).then(response => {
          this.submitLoading = false
          this.msgSuccess('修改成功');
          this.getConfigInfo(this.regionId);
        }).catch(err => {
          this.submitLoading = false
        })

      },
      getConfigInfo(regionId) {
        let _this = this
        getDistributionConfig(regionId).then(response => {
          _this.basicsList = []
          _this.distanceList = []
          _this.timeList = []
          response.data.forEach(t => {
            if (t.min == '0' && t.max == '0' && t.type == '00' && t.priceType == '10') {
              _this.basicsList.push({
                min: t.min,
                max: t.max,
                price: t.price,
                type: t.type,
                priceType: t.priceType
              })
            }
            if (t.type == '10' && t.priceType == '20') {
              _this.distanceList.push({
                min: t.min,
                max: t.max,
                price: t.price,
                type: t.type,
                priceType: t.priceType
              })
            }
            if (t.type == '30' && t.priceType == '10') {
              _this.timeList.push({
                min: t.min,
                max: t.max,
                price: t.price,
                type: t.type,
                priceType: t.priceType
              })
            }
          })
          if (_this.basicsList.length == 0) {
            _this.basicsList.push({
              min: 0,
              max: 0,
              price: 0,
              type: '00',
              priceType: '10'
            })
          }
        })
      }
    }
  }
</script>

<style scoped>
  .desc {
    font-size: 12px;
    color: brown;
  }

  .add {
    margin-top: 10px;
    margin-left: 160px;
    padding: 3px 15px !important;
  }

  .del {
    padding: 3px 3px !important;
  }

</style>
